// 拖拽绑定函数
function drag(name) {
    let dragDiv = document.getElementsByClassName(name);

    for (let i = 0; i < dragDiv.length; i++) {
        dragDiv[i].onmousedown = (e) => {
            //鼠标按下，计算鼠标触点距离元素左侧和顶部的距离
            let disX = e.clientX - dragDiv[i].offsetLeft;
            let disY = e.clientY - dragDiv[i].offsetTop;
            document.onmousemove = function (e) {
                //计算需要移动的距离
                let tX = e.clientX - disX;
                let tY = e.clientY - disY;
                //移动当前元素
                if (tX >= 0 && tX <= window.innerWidth - dragDiv[i].offsetWidth) {
                    dragDiv[i].style.left = tX + 'px';
                }
                if (tY >= 0 && tY <= window.innerHeight - dragDiv[i].offsetHeight) {
                    dragDiv[i].style.top = tY + 'px';
                }
            };
            //鼠标松开时，注销鼠标事件，停止元素拖拽。
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    }
}


// 获取页面信息，便于保存到服务器和数据库
function savaPage() {
    let context = $("<p>").append($("html").clone()).html();
    let page = document.getElementById("page");

    page.value = context;
    // console.log(context);
}

// 将贺卡区转成图片并下载，便于分享
function downloadForJS() {

    // 获取贺卡上 所有元素 的 删除元素按钮
    let delBtn = document.getElementsByClassName("close");
    // 暂时隐藏 删除元素按钮 ，避免导出的图片带 删除元素按钮
    for (let i = 0; i < delBtn.length; i++) {
        delBtn[i].style.display = "none";
    }

    //使用html2canvas 转换html为canvas
    html2canvas(
        document.getElementById('cardCanvas'),
        {scale: 3}
    ).then(function (canvas) {
        let imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url 　
        let saveLink = document.createElement('a');
        saveLink.href = imgUri;
        saveLink.download = '我的贺卡.png';
        saveLink.click();
    });
    // 重新显示 删除元素按钮 ，使用户可以使用 删除元素按钮 删除元素
    for (let i = 0; i < delBtn.length; i++) {
        delBtn[i].style.display = "";
    }
}

// 添加图片元素函数
function addDivForIframe(imgPath) {
    // 新建一个可拖拽的DIV
    let newDiv = document.createElement("div");
    newDiv.id = "div" + Date.parse(new Date().toString());
    newDiv.className = "dragDiv";
    newDiv.style.width = "50%";
    newDiv.style.left = "100px";
    newDiv.style.top = "100px";
    // 图片元素
    let newDivImg = document.createElement("img");
    newDivImg.src = imgPath;
    newDivImg.style.width = "30%";
    // 删除元素按钮
    let newDivBtn = document.createElement("button");
    newDivBtn.type = "button";
    newDivBtn.className = "close btn-left";

    // 删除元素按钮 图标
    let newDivBtnSpan = document.createElement("span");
    newDivBtnSpan.id = newDiv.id + "btn";
    newDivBtnSpan.ariaHidden = "true";
    newDivBtnSpan.innerText = "×";
    // 完成关闭按钮
    newDivBtn.appendChild(newDivBtnSpan);
    // 将图片元素放在可拖拽DIV下，使其可拖拽
    newDiv.appendChild(newDivBtn);
    newDiv.appendChild(newDivImg);
    // 获取贺卡区域
    let canvas1 = document.getElementById('diyFrame').contentWindow.document.getElementById("canvas1")
    // 往贺卡区域添加元素
    canvas1.appendChild(newDiv);
    // 获取 iframe
    let diyFrame = document.getElementById('diyFrame').contentWindow;
    // 重新绑定拖拽事件
    diyFrame._drag();
    // 调用函数，给新增元素的删除按钮绑定删除函数
    diyFrame.bindDel(newDiv.id, newDivBtnSpan.id);
}

// 添加输入框元素函数
function addSpanForIframe(imgPath) {
    // 新建一个可拖拽的DIV
    let newDiv = document.createElement("div");
    newDiv.id = "div" + Date.parse(new Date().toString());
    newDiv.className = "dragDiv";
    newDiv.style.width = "50%";
    newDiv.style.left = "100px";
    newDiv.style.top = "100px";
    // 输入框元素
    let newDivSpan = document.createElement("span");
    newDivSpan.className = "spanInput";
    newDivSpan.contentEditable = "true";
    newDivSpan.innerText = "请输入……";
    // 删除元素按钮
    let newDivBtn = document.createElement("button");
    newDivBtn.type = "button";
    newDivBtn.className = "close btn-left";

    // 删除元素按钮 图标
    let newDivBtnSpan = document.createElement("span");
    newDivBtnSpan.id = newDiv.id + "btn";
    newDivBtnSpan.ariaHidden = "true";
    newDivBtnSpan.innerText = "×";
    // 完成关闭按钮
    newDivBtn.appendChild(newDivBtnSpan);
    // 将图片元素放在可拖拽DIV下，使其可拖拽
    newDiv.appendChild(newDivBtn);
    newDiv.appendChild(newDivSpan);
    // 获取贺卡区域
    let canvas1 = document.getElementById('diyFrame').contentWindow.document.getElementById("canvas1")
    // 往贺卡区域添加元素
    canvas1.appendChild(newDiv);
    // 获取 iframe
    let diyFrame = document.getElementById('diyFrame').contentWindow;
    // 重新绑定拖拽事件
    diyFrame._drag();
    // 调用函数，给新增元素的删除按钮绑定删除函数
    diyFrame.bindDel(newDiv.id, newDivBtnSpan.id);
}

// 删除元素
function deleteDiv(id) {
    let delDiv = document.getElementById(id);
    // console.log("id   " + id);
    // console.log("delDiv   " + delDiv);
    delDiv.remove();
    // 删除元素后，重新给现有元素绑定拖拽时事件
    drag("dragDiv");
}

// 绑定 删除元素函数（deleteDiv） 的 函数
function bindDel(divID, btnID) {
    let btn = document.getElementById(btnID);
    // console.log("----:   " + btn);
    btn.onclick = function () {
        deleteDiv(divID);
    }
}